<template>
	<div>
		<el-card shadow="hover" body-style="padding:8px; ">
			<el-row justify="end" style="margin-bottom: 15px; margin-top: 3px">
				<el-col :span="8">
					<div style="float: left; height: 40px; width: 5px; background: green"></div>
					<div style="float: left; margin-top: 10px; margin-left: 20px; font-size: 16px">选择文书</div>
				</el-col>
				<el-col :span="16" style="text-align: right">
					<el-button type="primary" icon="el-icon-ok" size="mini" @click="batMathchEvi">确定</el-button>
				</el-col>
			</el-row>
			<el-row>
				<el-table
					stripe
					ref="refTable"
					:data="tableData"
					size="mini"
					style="width: 100%"
					@selection-change="tableRowCheck"
					:row-class-name="tableRowClassName"
				>
					<el-table-column type="selection" width="55" />
					<el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
					<el-table-column align="left" sortable label="文件名" show-overflow-tooltip>
						<template #default="scope">
							<a :href="scope.row.path" target="_blank">{{ scope.row.title }}</a>
						</template>
					</el-table-column>
					<el-table-column align="center" sortable label="上传时间" show-overflow-tooltip>
						<template #default="scope">
							{{ dateFormat(scope.row.createTime) }}
						</template>
					</el-table-column>
					<el-table-column align="center" property="eviNo" label="已关联物品编号" show-overflow-tooltip></el-table-column>
					<el-table-column align="center" property="eviName" label="已关联物品名称" show-overflow-tooltip></el-table-column>
				</el-table>
				<el-pagination
					:page-sizes="[10, 20, 50, 100]"
					:page-size="query.pageSize"
					layout="prev, pager, next, jumper,total,sizes"
					:total="total"
					@size-change="onHandleSizeChange"
					@current-change="onHandleCurrentChange"
					prev-text="上一页"
					next-text="下一页"
					background
				>
				</el-pagination>
			</el-row>
		</el-card>
	</div>
</template>

<script lang="ts">
import { ref, reactive, toRefs, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getCaseAttach, matchCaseAttachToEvidence } from '/@/api/case/index';
import { dateFormats, dateFormat } from '/@/common';

export default {
	name: 'choiceAttachFile',
	setup(props: any, context: any) {
		const refTable = ref(0);
		const router = useRouter();
		const query = router.currentRoute.value.query;
		const state = reactive({
			caseName: query.caseName,
			evidenceName: query.evidenceName,
			query: {
				caseid: query.caseid,
				evidenceId: query.evidenceId,
				page: 1,
				pageSize: 10,
				exclude: 'y',
			},
			tableData: [],
			tableSelection: [],
			total: 0,
		});
		function onHandleSizeChange(pageSize: number) {
			state.query.pageSize = pageSize;
			loadData();
		}
		function onHandleCurrentChange(pageIndex: any) {
			state.query.page = pageIndex;
			loadData();
		}
		async function loadData() {
			await getCaseAttach(state.query).then((res: any) => {
				if (res.success) {
					state.tableData = res.data.data;
					state.total = res.data.totalCount;
				}
			});
		}
		function batMathchEvi() {
			//关联物品
			if (state.tableSelection.length == 0) {
				ElMessage.warning('请选择要关联的记录！');
				return;
			}
			//从具体物品进来关联文书
			saveMath();
		}

		function saveMath() {
			var ids = state.tableSelection.map(function (a: any) {
				return a.id;
			});
			matchCaseAttachToEvidence({ ids: ids, evidenceId: query.evidenceId + '', caseid: state.query.caseid }).then((res: any) => {
				if (res.success) {
					ElMessage({
						message: '关联成功',
						type: 'success',
					});
					context.emit('loadDataRef');
				} else {
					ElMessage.error('关联失败！');
				}
			});
		}
		loadData();
		return {
			dateFormats,
			dateFormat,
			tableRowCheck: function (selection: any) {
				state.tableSelection = selection;
			},
			batMathchEvi,
			onHandleSizeChange,
			onHandleCurrentChange,
			saveMath,
			...toRefs(state),
		};
	},
};
</script>
<style scoped>
.el-upload-list__item .el-icon-close {
	display: block;
	color: white;
	top: 10px;
	right: 10px;
}
.upload-demo {
	height: 450px;
	border: 1px solid #eee;
}
</style>
